<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-text练习</title>
			<style>
			</style>
	</head>
	<body>	
	
		<div id="app" >	
		<!-- 1.插值表达式 -->
			<!-- {{hello}}	 -->
			<!-- 2.v-text 数据展现  vue的指令-->
			<!-- v-text当数据没有解析成功时:页面没有任何的数据，是v-cloak的升级版本 -->
			<!-- <h3>{{hello}}</h3> -->
			<h3 v-text = "hello"></h3>
			<!-- 3.v-html将数据按照html形式进行解析 
			有时候页面中的部分数据来源于其他服务器，远程服务器返回的是
			html代码片段，如果需要将代码片段渲染为页面形式，则使用该命令-->
			<div v-html ="html"></div>
			<!-- 4.v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始
			 Mustache标签。跳过大量没有指令的节点会加快编译-->
		<div v-pre>{{当头棒喝}}</div>
		<!-- 加了v-pre，不编译里面的，直接展示 -->
		<!-- 5.v-once 数据只渲染1次 -->
		<div v-text="one" v-once></div>
		<hr/>
		<!-- 6.v-model 双向数据绑定 适用于输入框类型
		1.data中的数据发生变化时，页面数据同步刷新
		当页面input框中的内容发生变化时，同步更新data数据-->
		<div style="border: aliceblue;">
			<h3>双向数据绑定</h3>
			用户名:<input type="text" name = "name" 
			v-model = "name"/>
		</div>
		
		
		
		</div>
		<script src="../js/vue.js"  charset="utf-8"></script>
	<script type="text/javascript">	
	const app = new Vue({
		el: "#app",
		data: {
			hello: "顽石点头",
			html:"<h1>醍醐灌顶</h1>",
			one: "不二法门",
			name: "admin"
		}
	})
	</script>
	
	</body>
</html>
